<template>
  <div class="app-library">
    <div class="app-library-info">
      <img
        :src="fullUrl(album.coverImage)"
        importance="high"
      >
      <div class="app-library-info-content">
        <div class="app-library-info-actions">
          <Button
            type="primary"
            shape="circle"
            :icon="isLike?'md-heart':'md-heart-outline'"
            class="like"
            @click="handleLike"
          >
            {{ album.favCount }} 喜欢
          </Button>
        </div>
        <h1 class="app-library-info-title">
          {{ album.title }}
        </h1>
        <!-- <span class="app-library-info-subtitle"></span> -->
        <p class="app-library-info-artists">
          歌手：
          <router-link
            v-for="artist in album.belongsToArtists"
            :key="artist.id"
            :to="{
              name: 'LibraryArtist',
              params: { artistId: artist.id }
            }"
          >
            {{ artist.name }}
          </router-link>
        </p>
        <p
          v-if="album.recordLabel"
          class="app-library-info-recordlabel"
        >
          发行公司：{{ album.recordLabel }}
        </p>
        <p class="app-library-info-publishdate">
          发行日期：{{ album.publishDate }}
        </p>
      </div>
    </div>
    <Tabs :animated="false">
      <DescTab>{{ album.description?album.description:'暂无介绍信息' }}</DescTab>
      <SongsTab :album-id="album.id" />
    </Tabs>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { CreateQueryParams } from '@nestjsx/crud-request'
import { DeepPartial } from 'ts-essentials'
import { Album, getAlbumById, checkFavAlbum, setFavAlbum, removeFavAlbum } from '@/api/resources'
import { LayoutModule, BreadcrumbItem } from '@/store/modules/layout'
import { UserModule } from '@/store/modules/user'
import { cdn } from '@/utils'
import * as _ from 'lodash'
import DescTab from './tabs/DescTab.vue'
import SongsTab from './tabs/SongsTab.vue'

@Component({
  name: 'Album',
  components: {
    DescTab,
    SongsTab
  }
})
export default class extends Vue {
  private params: CreateQueryParams = {
    join: [
      { field: 'belongsToArtists', select: ['id', 'name', 'images'] },
      { field: 'hasProducers', select: ['id', 'name'] },
      {
        field: 'hasSongs',
        select: ['id', 'title', 'duration', 'favCount']
      }
    ]
  };

  private breadcrumb: BreadcrumbItem[] = [];
  private album: DeepPartial<Album> = {};
  private isLike = false;

  async created () {
    this.album = (
      await getAlbumById(this.$route.params.albumId, this.params)
    ).data

    try {
      this.isLike = UserModule.token !== '' ? (await checkFavAlbum(this.$route.params.albumId)).data : false
    } catch (e) {
      console.log(e)
    }

    if (this.album.belongsToArtists) {
      const artistCrumb: BreadcrumbItem = {
        icon: 'person',
        title: _.flatMap(this.album.belongsToArtists, artist => {
          return {
            content: artist.name || '未知歌手',
            route: this.$router.resolve({
              name: 'LibraryArtist',
              params: { artistId: artist.id?.toString() || '0' }
            }).location
          }
        })
      }
      this.breadcrumb.push(artistCrumb)
    }
    const albumCrumb: BreadcrumbItem = {
      icon: 'album',
      title: {
        content: this.album.title || '未知专辑',
        route: this.$router.resolve(this.$route.fullPath).location
      }
    }
    this.breadcrumb.push(albumCrumb)

    LayoutModule.SetBreadcrumb(this.breadcrumb)
  }

  private fullUrl (path: string) {
    return cdn(path)
  }

  private getArtistRoute (id: number) {
    return this.$router.resolve({
      name: 'LibraryArtist',
      params: { artistId: id.toString() }
    }).location
  }

  private async handleLike () {
    if (UserModule.token === '') {
      this.$Message.warning('您尚未登录')
      return
    }

    let res = null
    if (this.isLike) {
      res = await removeFavAlbum(this.$route.params.albumId)
    } else {
      res = await setFavAlbum(this.$route.params.albumId)
    }
    if (res) {
      _.merge(this.album, res.data)
      this.isLike = !this.isLike
    }
  }
}
</script>

<style lang="less" scoped>
@import "../../../styles/theme";

@info-img-size: 20%;
@info-img-size-min: 160px;
@info-img-size-max: 220px;
@title-color: #fff5c3;

.app-library-info {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;

  > img {
    width: @info-img-size;
    height: @info-img-size;
    min-width: @info-img-size-min;
    min-height: @info-img-size-min;
    max-width: @info-img-size-max;
    max-height: @info-img-size-max;
    border-radius: 20px;
    box-shadow: 6px 6px 6px #202020;
  }

  .app-library-info-content {
    flex-grow: 1;
    padding-left: 2rem;

    .app-library-info-title {
      color: @title-color;
      font-size: 2.5em;
    }

    .app-library-info-artists,
    .app-library-info-recordlabel {
      font-size: 1.2em;
      font-weight: bold;
      line-height: 1.5em;
      margin: 8px 0;

      a {
        &::after {
          content: "|";
        }
        &:last-of-type {
          &::after {
            content: none;
          }
        }
      }
    }

    .app-library-info-publishdate {
      margin: 8px 0;
    }

    .app-library-info-actions {
      float: right;
      width: 132px;

      button {
        display: block;
        margin: 8px 0;
        width: 100%;
        text-align: left;
        font-weight: bold;
        &.like {
          background-color: @btn-red;
          border-color: @btn-red;
        }
        &.add {
          background-color: @btn-green;
          border-color: @btn-green;
        }
        &.post {
          background-color: @btn-blue;
          border-color: @btn-blue;
        }
      }
    }
  }
}
</style>
